<template>
  <div class="page-container">
    <a-card :bodyStyle="{ padding: '0' }" :bordered="false">
      <a-tabs v-model:active-key="activeType">
        <a-tab-pane key="1" title="基本信息">
          <card class="add-info-card" title="基本信息">
            <div class="section-item gray">
              <div class="section-item-content">
                <a-descriptions :size="size" :align="{ label: 'right' }">
                  <a-descriptions-item label="供应商名称">{{ supplierInfo.supplierName || '-' }}</a-descriptions-item>
                  <a-descriptions-item label="供应商类型">{{ supplierInfo.supplierTypeName || '-' }}</a-descriptions-item>
                  <a-descriptions-item label="地址">{{ supplierInfo.address || '-' }}</a-descriptions-item>
                </a-descriptions>
              </div>
            </div>
          </card>
          <card title="供应商联系人">
            <div class="section-item gray">
              <div class="section-item-content">
                <a-descriptions :size="size" :align="{ label: 'right' }">
                  <a-descriptions-item label="姓名">{{ supplierInfo.contactsName || '-' }}</a-descriptions-item>
                  <a-descriptions-item label="手机号">{{ supplierInfo.contactsMobile || '-' }}</a-descriptions-item>
                  <a-descriptions-item label="">&nbsp;</a-descriptions-item>
                </a-descriptions>
              </div>
            </div>
          </card>
          <card title="发票信息">
            <div class="section-item gray">
              <div class="section-item-content">
                <a-descriptions :size="size" :align="{ label: 'right' }">
                  <a-descriptions-item label="抬头">{{ supplierInfo.invoiceHead || '-' }}</a-descriptions-item>
                  <a-descriptions-item label="发票类型">{{ supplierInfo.invoiceTypeName || '-' }}</a-descriptions-item>
                  <a-descriptions-item label="纳税人型号">{{ supplierInfo.invoiceNum || '-' }}</a-descriptions-item>
                  <a-descriptions-item label="地址">{{ supplierInfo.invoiceAddress || '-' }}</a-descriptions-item>
                  <a-descriptions-item label="电话">{{ supplierInfo.invoicePhone || '-' }}</a-descriptions-item>
                </a-descriptions>
              </div>
            </div>
          </card>

          <!-- 银行账号 -->
          <BankAccountDetail :data="supplierInfo.backInfoList" />

          <card title="合同信息">
            <div class="section-item gray">
              <div class="section-item-content">
                <a-descriptions :size="size" :align="{ label: 'right' }">
                  <a-descriptions-item label="合同协议">
                    <template v-if="supplierInfo.contractFileId">
                      <div class="view-file-link" @click="viewFileFn(supplierInfo)">点击查看</div>
                    </template>
                  </a-descriptions-item>
                  <a-descriptions-item label="合同有效期">{{
                    supplierInfo.contractStartDate ? supplierInfo.contractStartDate + '至' + supplierInfo.contractEndDate : '-'
                  }}</a-descriptions-item>
                  <a-descriptions-item label="">&nbsp;</a-descriptions-item>
                </a-descriptions>
              </div>
            </div>
          </card>
          <card title="结算日配置">
            <div class="section-item gray">
              <div class="section-item-content">
                <a-descriptions :size="size" :align="{ label: 'right' }">
                  <a-descriptions-item label="结算方式">
                    <template v-if="supplierInfo.settleTypeName">
                      <span>
                        {{ supplierInfo.settleTypeName }}
                      </span>
                      <span v-if="supplierInfo.settleType != 1 && supplierInfo.settleDay">
                        ｜ {{ supplierInfo.settleDay }}日，进行结算
                      </span>
                    </template>
                  </a-descriptions-item>
                  <a-descriptions-item label="">&nbsp;</a-descriptions-item>
                  <a-descriptions-item label="">&nbsp;</a-descriptions-item>
                </a-descriptions>
              </div>
            </div>
          </card>
        </a-tab-pane>
        <a-tab-pane key="2" title="操作记录">
          <OperateLog :id="id" type="17" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <!-- 预览pdf -->
    <pdf-viewer
      :url="pdfViewInfo.url"
      :title="pdfViewInfo.title"
      v-model:visible="pdfViewInfo.show"
      @close="Object.assign(pdfViewInfo, { ...PDFDefaultAttr })"
    />
    <!-- 图片预览组件 -->
    <a-image-preview :src="previewUrl" v-model:visible="previewVisible" />
  </div>
</template>

<script setup name="SupplierDetail">
  import { reactive, ref, onMounted } from 'vue'
  import { supplierDetail } from '@/api/market/supplier'
  import BankAccountDetail from '@/views/market/components/bank-account-detail.vue'
  import { useRoute } from 'vue-router'
  import { getFileInfo } from '@/api/common/index.js'

  // pdf预览
  import { PDFDefaultAttr } from '@/components/pdf-viewer/const'
  const pdfViewInfo = reactive({ ...PDFDefaultAttr })

  const route = useRoute()
  const id = ref(route.params?.id || null)
  const loading = ref(false)
  const supplierInfo = reactive({}) // 详情信息
  const activeType = ref('1')

  // 获取详情
  const getSupplierDetail = () => {
    loading.value = true
    supplierDetail({ id: id.value }).then(({ result }) => {
      Object.assign(supplierInfo, result)
    })
    loading.value = false
  }
  // 图片预览
  const previewVisible = ref(false)
  const previewUrl = ref()
  const viewFileFn = (file) => {
    getFileInfo({ id: file.contractFileId }).then(({ code, result }) => {
      if (code == 200) {
        let fileName = result.originalFileName.split('.').pop().toLowerCase()
        // pdf预览
        // if (fileName == 'pdf') {
        //   Object.assign(pdfViewInfo, {
        //     url: `${import.meta.env.VITE_BASE_PATH}/uploadFile/image/${file.contractFileId}`,
        //     title: result.originalFileName,
        //     show: true,
        //   })
        //   return
        // }
        // 图片预览
        if (['jpg', 'png'].includes(fileName)) {
          previewUrl.value = `${import.meta.env.VITE_BASE_PATH}/uploadFile/image/${file.contractFileId}`
          previewVisible.value = true
          return
        }
        let url = `${import.meta.env.VITE_BASE_PATH}/uploadFile/image/${file.contractFileId}`
        window.open(url)
      }
    })
  }

  onMounted(() => {
    getSupplierDetail(id.value)
  })
</script>

<style lang="less" scoped>
  .section-item + .section-item {
    margin-top: 16px;
  }
  .description-item {
    font-size: 14px;
    .description-item-label {
      color: var(--color-text-3);
    }
    .description-item-content {
      color: var(--color-text-1);
    }
  }
  .view-file-link {
    font-size: 14px;
    color: rgb(var(--primary-6));
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
</style>
